<template>
    <div
        class="fixed w-full h-full bg-black opacity-70 inset-0 flex justify-center items-center overflow-y-auto z-10"
        v-if="showModal"
    >
        <transition
            enter-active-class="transition ease-out duration-300"
            enter-class="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
            enter-to-class="opacity-100 translate-y-0 md:scale-100"
            leave-active-class="transition ease-in duration-200"
            leave-class="opacity-100 translate-y-0 md:scale-100"
            leave-to-class="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
            appear
            @before-leave="cardLeaving = true"
            @after-leave="cardLeaving = false"
        >
            <div class="bg-white rounded p-4 w-4/5" :class="size">
                <div class="flex justify-between mb-3">
                    <div>{{ title }}</div>
                    <icon-font name="cross" @click="$emit('close')" class="cursor-pointer" />
                </div>
                <slot />
            </div>
        </transition>
    </div>
</template>

<script>
import iconFont from '../components/IconFont.vue'

export default {
    props: {
        value: { type: Boolean, required: true },

        size: { type: String, default: 'md:w-1/3' },

        title: { type: String, default: '提示' },
    },

    components: {
        iconFont,
    },

    data: () => ({
        showModal: false,
    }),

    watch: {
        value: {
            immediate: true,
            handler(newValue) {
                if (newValue) this.showModal = true
                else this.showModal = false
            },
        },
    },
}
</script>

<style></style>
